<template>
	<view>
		<guise-search></guise-search>
		<view class="scroll-view-container" :style="{height: wh + 'px'}">
			<!-- 左侧滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y :style="{height: wh +50+ 'px'}" show-scrollbar="false">
				<block v-for="(item,i) in cateList" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChange(i)">
						{{item.catename}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧滚动视图区域 -->
			<view class="right-box">
				<view class="right-header">
					<view @click="sortIndex=0" :class="{currsort:sortIndex===0}">综合排序</view>
					<view style="display: flex;" @click="sortIndex = sortIndex===1?-1:1">
						<text :class="{currsort:sortIndex===1||sortIndex===-1}">按价格</text>
						<view class="price-icons">
							<uni-icons type="top" size="15" :color="sortIndex===-1?'#f00':''"></uni-icons>
							<uni-icons type="bottom" size="15" :color="sortIndex===1?'#f00':''"></uni-icons>
						</view>
					</view>
					<view :class="{currsort:sortIndex===2}" @click="sortIndex=2">按销量</view>
				</view>
				<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
					<view class="right-goods-box" v-for="item in currGoodsData" :key="item._id">
						<goods-card :goods="item"></goods-card>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deepClone
	} from '@/utils/toolFun.js';
	export default {
		data() {
			return {
				wh: 0,
				cateList: [],
				active: 0,
				goodsList: [],
				currGoodsData: [],
				sortIndex: 0,
			};
		},
		watch: {
			sortIndex(newValue) {
				this.getCurrGoodsData();
			}
		},
		onLoad() {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			this.wh = sysInfo.windowHeight - 50;
			this.getCateList();
		},
		methods: {
			// 获取分类数据
			async getCateList() {
				let {
					statusCode,
					data
				} = await uni.$http.reqCateData();
				if (statusCode == 200) {
					this.cateList = data.cateList;
					this.goodsList = data.goodsList;
				}
				this.activeChange(0)
			},
			// 改变当前选中分类
			activeChange(i) {
				this.active = i;
				this.getCurrGoodsData()
			},
			// 获取当前分类的商品列表
			getCurrGoodsData() {
				let cate = this.cateList[this.active].catename;
				let data = this.goodsList.filter(item => {
					return item.cate.indexOf(cate) != -1
				});
				let newData = deepClone(data);
				switch (this.sortIndex) {
					case 0:
						break;
					case 1:
						newData.sort((a, b) => b.price - a.price);
						break;
					case -1:
						newData.sort((a, b) => a.price - b.price);
						break;
					default:
						break;
				}
				this.currGoodsData = newData;
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 200px;

			.left-scroll-view-item {
				box-sizing: border-box;
				padding: 40rpx 20rpx;
				background-color: #eee;
				text-align: center;
				font-size: 30rpx;

				// 激活项的样式
				&.active {
					font-weight: 700;
					background-color: #ffffff;
				}
			}
		}

		.right-box {
			flex: 1;

			.right-header {
				display: flex;
				justify-content: space-around;
				height: 100rpx;
				background-color: #fff;

				view {
					line-height: 100rpx;
					font-size: 30rpx;
				}

				.price-icons {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 6rpx;

					uni-icons {
						height: 30rpx;
						line-height: 1;
					}
				}

				.currsort {
					color: #f00;
				}
			}

			.right-scroll-view {
				width: 550rpx;
				background-color: #fff;

				.right-goods-box {
					border-top: 1px solid #e9e9e9;
				}
			}
		}

	}
</style>
